<template>
  <div id="about">
    <div class="about_banner">
      <div class="title">
        <h5>
          <span>优质</span>的客户服务
        </h5>
        <h5>
          高效的办事
          <span>效率</span>
        </h5>
      </div>
      <!-- 关于我们特殊部分 -->
      <div class="about-list">
        <ul>
          <li v-for="(list, key) in selectMyList" :key="key">
            <p class="num">{{list.num}}</p> 
            <p class="label">{{list.details}}</p>
          </li>
        </ul>
      </div>
    </div>
    <!-- 产品优势 -->
    <section class="product">
      <div class="product-title">
        <h5>强大产品优势</h5>
      </div>
      <div class="container product-list">
        <ul>
          <li v-for="(item, index) in goodList" :key="index">
            <div class="icon">
              <i class="iconfont" v-html="item.icon"></i>
            </div>
            <div class="details">
              <h6>{{item.title}}</h6>
              <p>{{item.dir}}</p>
            </div>
          </li>
        </ul>
      </div>
    </section>
    <section class="hy">
      <div class="hy-title">
        <h5>敏锐的行业前瞻</h5>
      </div>
      <ul class="container hy-list">
        <li v-for="(item, index) in hyList " :key="index">
          <div class="icon">
            <i class="iconfont" v-html="item.icon"></i>
          </div>
          <div class="hy_detail">
            <h5>{{item.title}}</h5>
            <p>{{item.dir}}</p>
          </div>
        </li>
      </ul>
    </section>
    <!-- 售后服务 -->
    <section class="product">
      <div class="product-title">
        <h5>优质的售后服务</h5>
      </div>
      <div class="container product-list">
        <ul>
          <li v-for="(item, index) in shList" :key="index">
            <div class="icon">
              <i class="iconfont" v-html="item.icon"></i>
            </div>
            <div class="details">
              <h6>{{item.title}}</h6>
              <p>{{item.dir}}</p>
            </div>
          </li>
        </ul>
      </div>
    </section>
  </div>
</template>

<script>
export default {
  name: "about",
  data() {
    return {
      selectMyList: [
        {
          num: "10+",
          details: "年技术沉淀"
        },
        {
          num: "60+",
          details: "款创新产品"
        },
        {
          num: "200+",
          details: "人专业团队"
        },
        {
          num: "300+",
          details: "家全球客户"
        }
      ],
      goodList: [
        {
          icon: "&#xe62e;",
          title: "独家源码出售",
          dir: "各系统均提供专门的独家源码出售，方便客户自行新系统开发"
        },
        {
          icon: "&#xe62d;",
          title: "产品更新迅速",
          dir:
            "每周均提供不同系统的功能点更新及优化，产品更新迅速让您时刻立足行业前沿。"
        },
        {
          icon: "&#xe638;",
          title: "产品原生开发",
          dir: "产品原生开发，运行更快更流畅，让客户拥有更良好的体验。"
        },
        {
          icon: "&#xe634;",
          title: "专属定制开发",
          dir:
            "每周均提供不同系统的功能点更新及优化，产品更新迅速让您时刻立足行业前沿。"
        },
        {
          icon: "&#xe62f;",
          title: "方便二次开发",
          dir:
            "提供系统程序及二次开发文档，大大缩短开发进程，让您的系统快速上线。"
        },
        {
          icon: "&#xe639;",
          title: "全球3000+客户共同选择",
          dir: "产品功能稳定，获全球3000+家商业企业客户信赖，品质有保障。"
        }
      ],
      hyList: [
        {
          icon: "&#xe633;",
          title: "设立战略研究院",
          dir:
            "设立专门的行业战略研究院，与行业内专家时刻保持密切联系，形成全面独特的市场敏锐前瞻。"
        },
        {
          icon: "&#xe62b;",
          title: "产品领先全国",
          dir:
            "领先全国，首家推出“量子区块链商城”、“量子数字钱包”、等创新产品、并取得骄人业绩。"
        },
        {
          icon: "&#xe630;",
          title: "最早开发区块链商城系统",
          dir:
            "国内最早招收区块链商城系统平台的开发搭建，经过持续优化已达到系统稳定、功能持续全面更新中。"
        },
        {
          icon: "&#xe62d;",
          title: "产品更新迅速",
          dir:
            "每周均提供不同系统的功能点更新及优化，产品更新迅速，让您时刻立足行业前沿。"
        }
      ],
      shList: [
        {
          icon: "&#xe62c;",
          title: "强大的售后团队",
          dir: "强大的售前售后团队，配备专门的服务人员及技术人员1对1服务确保客户碰到的问题第一时间予以解决。"
        },
        {
          icon: "&#xe636;",
          title: "完美的技术支持",
          dir:
            "产品手册，操作教程，安装帮助等服务手册一应俱全，量子启示为您提供完整的技术指导和行业支持，使您快速上手，轻松应对。"
        },
        {
          icon: "&#xe637;",
          title: "迅速响应服务",
          dir: "电话、QQ 、工单、上门… 量子启示的售后人员随时为您提供迅速响应服务，及时应对客户提出的一切运营、技术难题。"
        },
        {
          icon: "&#xe635;",
          title: "全方位服务",
          dir:"QQ、电话等聊天工具全方位解答客户各种操作、技术难题确保客户系统安全稳定、BUG及时修复。"
        },
        {
          icon: "&#xe632;",
          title: "平台搭建部署全程指导",
          dir: "为各平台的搭建部署提供全程指导，即使创业小白、量子启示也能助您实现平台快速上线和运营。"
        },
        {
          icon: "&#xe631;",
          title: "更多其他服务",
          dir: "量子启示与您协同配合，提供优质的解决方案。持续跟进用户反馈，满足您的多方位其他需求。"
        }
      ],
    };
  }



  
};
</script>

<style lang="stylus" scoped>
@import '../static/styl/mixin.styl'
#about
  width 100%
  .about_banner
    height 700px
    bgImg('../assets/banner4.png', cover)
    position relative
    .title
      padding-top 266px
      h5
        text-align center
        font-size 64px
        color #fff
        font-weight bold
        text-shadow 0px 0px 13px rgba(54, 54, 54, 0.81)
        span
          color #2FA4F5
      h5:last-child
        margin-top 15px
    .about-list
      position absolute
      bottom 0
      width 100%
      height 120px
      background linear-gradient(187deg, rgba(15, 34, 85, 0.3), rgba(42, 59, 114, 0.3))
      ul
        width 1280px
        margin 0 auto
        box-sizing border-box
        padding-top 20px
        display flex
        justify-content space-around
        height 100%
        color #fff
        li
          padding 0 90px
          height 100%
          border-right 1px solid #fff
          .num
            font-size 58px
          .label
            font-size 20px
        li:last-child
          border 0
  .product, .hy
    background-color #fff
    padding-top 100px
    padding-bottom 83px
    .product-title, .hy-title
      padding-bottom 95px
      text-align center
      h5
        font-size 42px
        margin-bottom 19px
    .product-list
      ul
        display flex
        justify-content flex-start
        flex-wrap wrap
        li
          width 500px
          display flex
          justify-content flex-start
          align-items center
          padding 48px 0
          border-bottom 1px dashed #ccc
          .icon
            margin-right 28px
            i
              color #7585AB
              font-size 50px
          .details
            color #666
            h6
              font-size 22px
            p
              font-size 14px
              margin-top 14px
              line-height 24px
        li:nth-of-type(2n)
          padding-left 200px
        li:nth-of-type(5), li:nth-of-type(6)
          border 0
  .hy
    padding-top 77px
    background-color #F7F8FA
    .hy-list
      display flex
      justify-content space-between
      text-align center
      .icon
        margin-bottom 38px
        i
          font-size 50px
          color #7585AB
      .hy_detail
        color #666
        h5
          font-size 22px
          margin-bottom 23px
        p
          text-align left
          width 229px
          line-height 24px
          font-size 14px
</style>